<template>
    <el-radio-group v-model="value" @change="handleChange">
        <template v-for="(item,index) in list">
            <el-radio :label="item.label" border :key="index"><div>{{item.name}}<p>{{item.num}}</p></div><div class="icon" :class="styleList[index].color"><i :class="styleList[index].icon"></i> </div></el-radio>
        </template>
    </el-radio-group>
</template>
<script>
    export default {
        name:"topRadioGroup",
        props:["list"],
        data() {
            return {
                value: undefined,
                styleList:[{icon:"el-icon-document-copy",color:"blue"},{icon:"el-icon-document-checked",color:"red"},{icon:"el-icon-document",color:"green"}]
            }
        },
        created() {
          console.log("list",this.list)
        },
        methods: {
            handleChange() {
                console.log("this.value",this.value)
                this.$emit("handleChange",this.value)
            }
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep.el-radio-group {
        justify-content: space-between;
        width: 100%;
        display: flex;
        margin-bottom: 20px;

        .el-radio {
            height: 85px;
            width: 220px;
            padding: 15px 20px;
            box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.15);
            border: none;
            .el-radio__input {
                display: none;
            }

            .el-radio__label {
                display: flex;
                justify-content: space-between;
                font-size: 16px;
            }
            p{
                font-weight: 700;
                font-size: 20px;
                padding: 10px;
            }
            .icon{
                border-radius: 50%;
                font-size: 32px;
                width: 50px;
                height: 50px;
                i{
                    padding: 10px;
                    color: #ffffff;
                }
            }
            .blue{
                background: #3d77ce;
            }
            .red{
                background: #7bc085;
            }
            .green{
                background: #d0503d;
            }

        }
    }
</style>

